<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <title>奖学金证书</title>
    <style type="text/css">
        .createImgCon{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            margin: auto;
            width: 500px;
            height: 760px;
        }
        .downloadedImgBox{
            text-align: center;
            display: none;
        }
        .downloadedImg{
            display: inline-block;
            margin-top: 30px;
            color: #000;
            padding:10px;
            background: #ccc;
            border-radius: 8px;
        }
        .loading{
            width: 120px;
            height: 120px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 6px;
            text-align: center;
            color: #fff;
            padding: 10px;
            position: absolute;
            z-index: 10000;
            top: 50%;
            left: 50%;
            margin: -40px 0 0 -40px;
            display: none;
        }
        .loading img{
            width: 60px;
            height: 60px;
            -webkit-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }
        @-webkit-keyframes spin {
            from {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }

            to {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }
        @-moz-keyframes spin {
            from {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }

            to {
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }
        @-o-keyframes spin {
            from {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }

            to {
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }
        @keyframes spin {
            from {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }

            to {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }
        @media screen and (max-width:450px){
            .createImgCon{
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="createImgCon">
            <canvas id="canvas" width="597" height="808" style="width:500px;height:677px;display:none"></canvas>
            <div><img class="showPosterImg" src="" style="width:100%;"></div>
            <div class="downloadedImgBox"><a href="" class="downloadedImg" style="text-decoration: none;">保存图片</a></div>
        </div>
        <div class="loading">
            <img src="../../static/img/loding.png"/>
            <div>图片正在生成中...</div>
        </div>
    </div>
    <script src="https://hkres.etalk365.com/public/lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        let poster = ''
        let name = '[[${name}]]'
        let money = '[[${money}]]元'
        let time = '[[${dates}]]';
        //let time = '24小时内有效';
        if (name !== '' && money !== '' && time !== '') {
            let img = new Image()
            img.src = '../../static/img/scholarship_bg.png'
            img.onload = function () {
                var c = document.querySelector("#canvas")
                var ctx = c.getContext('2d')
                ctx.drawImage(img, 0, 0, 597, 808)
                ctx.fillStyle = '#fff'
                ctx.font = '18px Microsoft YaHei'
                ctx.textAlign = 'left'
                ctx.fillStyle = '#000'
                ctx.fillText(name, 190, 430)
                ctx.fillText(money, 400, 430)
                ctx.font = '16px Microsoft YaHei'
                ctx.fillText(time, 420, 770)
                poster = c.toDataURL('image/png')
                $(".loading").hide()
                $(".showPosterImg").attr('src', poster)
                //$(".downloadedImgBox").show()
                if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                    $(".downloadedImg").hide();
                    $(".downloadedImgBox").css("font-weight","bold");
                    $(".downloadedImgBox").css("font-size","16px");
                    $(".downloadedImgBox").text("图片长按可保存");
                }
                $(".downloadedImgBox").show();
            }
        } else {
            $(".loading").show()
            $(".downloadedImgBox").hide()
        }
        $(".downloadedImg").click(function(){
            if (poster !== '') {
                $(".downloadedImg").attr({href: poster, download: new Date().getTime() + ".png"})
            } else {
                alert('保存失败');
            }
        })


    </script>
</body>
</html>
